<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">商家</text>
			<input class="input" :maxlength="20" type="text" v-model="merchat.merchantName" placeholder="请输入商家信息" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" :maxlength="20" type="text" v-model="merchat.contactName" placeholder="请输入联系人" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">电话</text>
			<input class="input" type="number" v-model="merchat.mobileNo" placeholder="请输入电话" placeholder-class="placeholder" />
		</view>
		<view class="row b-b"> 
			<text class="tit">地址</text>
			<input class="input " type="text" v-model="merchat.merchantAddress" disabled placeholder="请选择地址" placeholder-class="placeholder"  @click="goadress"></input>
			<view class="goadress" @click="goadress"><image src="/static/adress_icon.png" mode="aspectFill"></image>地图</view>
		</view>
		<view class="row b-b">
			<text class="tit">推荐</text>
			<input class="input" type="text" v-model="merchat.referrer" placeholder="请输入推荐人的手机号码" placeholder-class="placeholder" />
		</view>

		<button class="add-btn" @click="confirm">提交</button>

	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				manageType:'',
				merchat: {
					contactName: '',
					merchantName:'',
					mobileNo: '',
					province: '',
					city: '',
					district: '',
					latitude:'',
					longitude:'',
					merchantAddress:'',
					referrer:''
				},
				adress:''
			}
		},
		onLoad(option){
			
		},
		onShow(){
			uni.$on('updatecoordinates',this.updatecoordinates)
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		components:{
			wPicker
		},
		onShareAppMessage: function (e) {
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		  },
		  onShareTimeline: function(res){
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		},
		methods: {
			updatecoordinates(e){
				this.merchat.province = e.coordinates.pname
				this.merchat.city = e.coordinates.cityname
				this.merchat.district = e.coordinates.adname
				this.merchat.latitude = e.coordinates.latitude
				this.merchat.longitude = e.coordinates.longitude
				this.merchat.merchantAddress=e.coordinates.address
				this.adress=e.coordinates.pname+" "+e.coordinates.cityname+" "+e.coordinates.adname+" "+e.coordinates.address

				console.log(e)
    		},
			showAddressRegion(){
				this.$refs['region'].show();
			},
			// onConfirm(val){
			// 	this.$set(this.merchat,'province',val.checkArr[0]);
			// 	this.$set(this.merchat,'city',val.checkArr[1]);
			// 	this.$set(this.merchat,'area',val.checkArr[2]);
			// },
			
			//地图选择地址
			// chooseLocation(){
			// 	uni.chooseLocation({
			// 		success: (data)=> {
			// 			// debugger
			// 			this.merchat.addressName = data.name;
			// 		}
			// 	})
			// },
			goadress(){
				uni.navigateTo({
					url: '/pages/gomerchant/map'
				})
			},
			//提交
			confirm(){
				let data = this.merchat;
				if(!data.merchantName){
					this.$api.msg('请输入商家信息');
					return;
				}
				if(!data.contactName){
					this.$api.msg('请输入联系人');
					return;
				}
				if(!this.$api.util.validateMobileNo(data.mobileNo)){
					this.$api.msg('请输入正确的电话号码');
					return;
				}
				if(!this.adress){
					this.$api.msg('请填写详细地址');
					return;
				}
				
				let options = this.merchat;

				this.$api.request.applyMerchant(options, res => {
					if (res.body.status.statusCode === '0') {
						this.$api.msg('提交成功');
						setTimeout(()=>{
							uni.navigateBack();
						}, 800)
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				});
				
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
		padding-top:40upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height:80upx;
		background: #fff;
		margin-bottom: 30upx;
		.tit{
			flex-shrink: 0;
			width: 110upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			height: 80upx;
			line-height: 80upx;
			background-color: #F7F7F7;
			padding: 0 20upx;
			padding-right: 40upx;
			/*overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;*/
			color: $font-color-dark;
		}
		.input2{
			padding: 20upx;
			line-height: 40upx;
			min-height: 120upx;
			font-size: 28upx;
			height: auto;
			white-space:normal;
		}
		.goadress{
			width: 131upx;
			height: 80upx;
			line-height: 80upx;
			color: #7B7B7D;
			font-size: 28upx;
			text-align: center;
			background: #F7F7F7;
			border-radius: 2upx;
			margin-left: 10upx;
			image{
				width: 24upx;
				height: 32upx;
				display: inline-block;
				vertical-align: middle;
				margin-right: 10upx;
			}
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
			
		}
		.yticon{
			position: absolute;
			z-index: 10;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 40upx;
			line-height: 80upx;
		}

	}
	.b-b:after, .b-t:after{
		display: none;
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: #F94369;
		border-radius: 40upx;
		position: absolute;
		z-index: 10;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 20upx;
	}
	.del-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	
	.tab{
		padding:20upx 0;
		font-size: 32upx;
	}
	.tab.active{
		color:#f00;
	}
	.result{
		margin-top: 100upx;
		font-size: 32upx;
	}
	
</style>
